<template>
	<div id="check">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/hello' }">员工签到系统</el-breadcrumb-item>
			<el-breadcrumb-item>签到管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
					<el-col style="margin-bottom: 30px;">
						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							<el-form-item label="姓名">
								<el-input v-model="formInline.UserName"></el-input>
							</el-form-item>
							<el-form-item label="签到日期">
								<el-input type="date" v-model="formInline.CheckTime1"></el-input>
							</el-form-item>
							<el-form-item label="-">
								<el-input type="date" v-model="formInline.CheckTime2"></el-input>
							</el-form-item>
							<el-form-item label="签到状态" prop="CheckState" label-width="80px">
								<el-select v-model="formInline.CheckState">
									<el-option label="--已签到--" value="已签到"></el-option>
									<el-option label="--未签到--" value="未签到"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i></el-button>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-table border :data="chList" style="margin-bottom: 20px;">
					<el-table-column label="签到编号" prop="UCId" width="100px"></el-table-column>
					<el-table-column label="用户姓名" prop="UserName" width="100px"></el-table-column>
					<el-table-column label="签到时间" prop="CheckTime">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.CheckTime===null">0000-00-00 00:00:00</el-tag>
							<el-tag type="danger" v-else>{{scope.row.CheckTime}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="签到状态" prop="CheckState" width="100px">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.CheckState==='未签到'">{{scope.row.CheckState}}</el-tag>
							<el-tag type="danger" v-else>{{scope.row.CheckState}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="签退状态" prop="IsCanCel" width="100px">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.IsCanCel===1">已签退</el-tag>
							<el-tag type="danger" v-else>未签退</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="签退时间" prop="CheckOutTime">
						<template slot-scope="scope">
							<el-tag type="danger" v-if="scope.row.CheckOutTime===null">0000-00-00 00:00:00</el-tag>
							<el-tag type="success" v-else>{{scope.row.CheckOutTime}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" icon="el-icon-setting" @click="Reset(scope.row.UCId)">签退
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
					background :page-sizes="[5, 10, 15, 20]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="count">
				</el-pagination>
		</el-card>
		</div>
</template>

<script>
	export default{
		data() {
			return{
				formInline: {
					UserName: '',
					CheckTime1: '',
					CheckState: '',
					CheckTime2: ''
				},
				chList:[],
				page:1,
				limit:5,
				count:0
			}
		},
		mounted() {
			this.GetCheckList();
		},
		methods:{
			gettime() {
				var nowDate = new Date();
				let date = {
					year: nowDate.getFullYear(),
					month: nowDate.getMonth() + 1,
					day: nowDate.getDay(),
					h: nowDate.getHours(),
					s: nowDate.getMinutes(),
					ss: nowDate.getSeconds()
				};
				let systemDate = date.year + "年" + date.month + "月" + date.h + "时" + date.s + "分" + date.ss + "秒";
				return systemDate
			},
			//签退
			async Reset(UCId) {
				const delresult = await this.$confirm('是否签退, 是否继续?', '签退提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (delresult !== 'confirm') {
					return this.$message.info('已经取消签退！')
				}
				let _this = this;
				_this.$axios.post('/api/api/Check/resetuser', {
					UserID: parseInt(sessionStorage.getItem("Id")),
					time: this.gettime()
				}).then(function(res) {
					if (res.data.code == 0) {
						_this.GetCheckList();
						_this.$message.success("签退成功！");
					}else if(res.data.code == -1){
						_this.$message.error(res.data.msg);
					}else if(res.data.code == -2){
						_this.$message.error(res.data.msg);
					}else if(res.data.code == -3){
						_this.$message.error(res.data.msg);
					}else if(res.data.code == -4){
						_this.$message.error(res.data.msg);
					}else if(res.data.code == -5){
						_this.$message.error(res.data.msg);
					}
				}).catch(function(err) {
					_this.$message.error("重置失败！");
				})
			},
			//获取列表
			GetCheckList() {
				let _this = this;
				this.$axios.get('/api/api/Check/GetChList', {
					params: {
						page: _this.page,
						limit: _this.limit,
						UserName: _this.formInline.UserName,
						CheckTime1: _this.formInline.CheckTime1,
						CheckState: _this.formInline.CheckState,
						CheckTime2: _this.formInline.CheckTime2,
					}
				}).then(function(res) {
					console.log(res);
					_this.chList = res.data.data;
					_this.count = res.data.count;
				}).catch(function(res) {
					console.log(res);
				});
			},
			//搜索
			onSubmit() {
				this.GetCheckList()
			},
			handleSizeChange(newSize) {
				console.log(newSize)
				this.limit = newSize
				this.GetCheckList()
			},
			//监听页码值改变
			handleCurrentChange(newPage) {
				console.log(newPage)
				this.page = newPage
				this.GetCheckList()
			},
		}
	}
</script>

<style>
</style>
